<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>

        div{
            width: 200px;
            height: 200px;
            background-color: #d51b1b;
            animation: myadmin 3s linear 0s infinite;
        }

        div:hover{
            animation-play-state: paused;
        }

        @keyframes myadmin{
            from{
                background-color: red;
            }to{
                background-color: blue;
            }
        }

        
    </style>
<body>
    <!-- 动画:是使元素从一种样式逐渐变成另一种样式的效果
       用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100% 
    使用@keyframs创建动画
    -->

    <!-- animation执行动画
    name 名称 ,duration 持续时间,timing-function 动画效果的速率
    delay 动画的开始时间(延迟执行) , iteration-count 动画循环的次数
    infinite 无限次数的循环, direction 动画播放的方向
    animation-play-state 控制动画的播放状态,running代表播放,pause代表停止播放
    -->

    <div></div>

  
</body>
</html>